<template>
	<view>
		<u-toast ref="uToast" />
		<common :tips='commonTips'></common>
		<u-modal v-model="delModelShow" :mask-close-able="true" :show-cancel-button="true" @confirm="delConfirm"
			:content="delModelContent"></u-modal>
		<u-form :model="info" ref="uForm">
			<u-cell-group>
				<u-cell-item @click="goToUserInfo()" :title="information.username||'个人资料'">
					<image class="user-avatar" slot="icon" :src="information.avatar" mode="aspectFill"></image>
				</u-cell-item>
				<u-cell-item :arrow="false" title="备注">
					<u-input v-model="friend.remark" @blur="save" slot="right-icon"
						:custom-style="{'text-align':'right'}" placeholder='请输入备注' />
				</u-cell-item>
			</u-cell-group>

			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item :arrow="false" title="性别"
						:value="information.gender==0?'--':information.gender==1?'男':'女'" />
					<u-cell-item :arrow="false" title="市、县" :value="information.area||'--'" />
					<u-cell-item :arrow="false" title="职业/专业" :value="information.speciality||'--'" />
					<u-cell-item :arrow="false" title="个人简介" :value="information.bio||'--'" />
					<u-cell-item title="他的图片" @click="goTo('/sub/center/uploadInfoImg?id='+information.id)" />
				</u-cell-group>
			</view>

			<view class="u-m-t-20" v-if="info.user.job==2">
				<u-cell-group>
					<navigator :url="`/sub/center/mine/zixun?id=${userId}`">
						<u-cell-item title="历史咨询问卷" :value="advice_count||''" />
					</navigator>
					<navigator :url="`/sub/center/mine/huifang?id=${userId}`">
						<u-cell-item title="历史回访问卷" :value="follow_count||''" />
					</navigator>
				</u-cell-group>
			</view>

			<view class="u-m-t-20">
				<u-cell-group>
					<!-- 				<u-cell-item title="设为置顶" :arrow="false">
						<u-switch slot="right-icon" @change="infoSwitchChange('session-top')"
							v-model="info.top_contacts"></u-switch>
					</u-cell-item> -->
					<!-- 	<u-cell-item  title="会话不通知" :arrow="false" >
						<u-switch slot="right-icon" @change="infoSwitchChange('block_messages')" v-model="info.block_messages"></u-switch>
					</u-cell-item> -->
				</u-cell-group>
			</view>



			<view v-if="info.type == 'single' && !info.friend " @click="friendButton"
				class="u-m-t-20 fff-bg-item color-red">
				<view class="form-button">加为好友</view>
			</view>
			<!-- 		<view  @click="delContact('user')" class="u-m-t-20 fff-bg-item color-red">
				<view class="form-button">删除好友</view>
			</view> -->
			<!-- 	<view  @click="report('user')" class="u-m-t-20 fff-bg-item color-orgin">
				<view class="form-button">举报</view>
			</view> -->
			<view v-if="info.type == 'service'" @click="delSession" class="u-m-t-20 fff-bg-item color-red">
				<view class="form-button">移除会话</view>
			</view>
		</u-form>
	</view>
</template>

<script>
	import {
		editUserInfo,
		userInfo,
		editUserRemark
	} from '@/api/index.js'
	export default {
		data() {
			return {
				id: 0,
				info: {
					sessionUser: {
						nickname: '加载中...'
					}
				},
				information: {},
				groupChatMember: [],
				delModelShow: false,
				delModelContent: '',
				commonTips: '',
				advice_count: '',
				follow_count: '',
				friend: {},
				userId: ''
			}
		},
		watch: {
			info: {
				// 每个属性值发生变化就会调用这个函数
				handler(newVal, oldVal) {
					// console.log('info:', newVal)
					if (this.userId)
						this.init(this.userId)
				},
				// 立即处理 进入页面就触发
				immediate: true,
				// 深度监听 属性的变化
				deep: true
			},
		},
		onLoad: function(query) {
			this.id = query.id ? query.id : 0
			this.userId = query.userid
			this.ws.pageFun(this.pageDataLoad, this);
		},
		onShow: function() {
			this.ws.checkNetwork(this)
			if (this.ws.invitationGroupmemberSelected) {
				this.ws.pageFun(res => {
					this.ws.send({
						c: 'Message',
						a: 'invitationGroupmember',
						data: {
							pickuser: this.ws.invitationGroupmemberSelected,
							id: this.info.sessionUser.id
						}
					})
				}, this)
				this.ws.invitationGroupmemberSelected = null
			}

			if (this.ws.pageRefresh.chatSetting) {
				this.ws.pageFun(this.pageDataLoad, this);
				this.ws.pageRefresh.chatSetting = false
			}
		},
		methods: {
			save() {
				editUserRemark({
					user_id: this.friend.friend_id,
					remark: this.friend.remark
				}).then(res => {
					if (!res.code) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			init(id) {
				let that = this
				userInfo({
					'user_id': id
				}).then(res => {
					if (res.code == 1) {
						that.information = res.data.info
						that.friend = res.data.friend
						that.advice_count = res.data.advice_count
						that.follow_count = res.data.follow_count
					}
				})
			},
			pageDataLoad: function() {
				var that = this
				let message = {
					c: 'User',
					a: 'sessionSetting',
					data: {
						'session_id': that.id
					}
				}
				that.ws.send(message);
			},
			friendButton: function() {
				var that = this
				uni.navigateTo({
					url: '/sub/search/add-contact?id=' + that.info.sessionUser.id + '&type=user'
				})
			},
			groupButton: function(type) {
				if (type == 'exit') {
					this.delContact('group')
				}
			},
			delContact: function(type) {
				if (type == 'user') {
					if (this.info.is_relation == 0) {
						this.delModelContent = '你确定要删除此好友吗？';
					} else {
						this.delModelContent = '邀请好友不允许删除！';
					}

				} else if (type == 'group') {
					if (this.info.isLeader) {
						this.delModelContent = '你确定要解散群聊吗？';
					} else {
						this.delModelContent = '你确定要退出群聊吗？';
					}
				}
				this.delModelShow = true
			},
			delConfirm: function() {
				var that = this
				if (that.info.type == 'service') {
					// 移除会话
					that.ws.pageFun(function() {
						that.ws.send({
							c: 'User',
							a: 'sessionOperation',
							data: {
								action: "session-remove",
								id: that.info.id,
								source: 'uni-app'
							}
						});
					}, that)
					return;
				}

				if (that.info.is_relation == 0) {
					that.ws.pageFun(function() {
						let message = {
							c: 'User',
							a: 'delContact',
							data: {
								'id': that.info.sessionUser.id,
								'type': (that.info.type == 'single') ? 'user' : 'group'
							}
						}
						that.ws.send(message);
						that.ws.showMsgCallback = function() {
							that.ws.pageRefresh.message = true
							that.ws.pageRefresh.addressList = true
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/message/message'
								})
							}, 2000)
						}
					}, that)
				}


			},
			report: function() {
				uni.navigateTo({
					url: '/pages/center/report?title=举报&type=user&id=' + this.id
				})
			},
			infoSwitchChange: function(name) {
				var that = this
				if (name == 'top') {
					that.ws.pageFun(function() {
						that.ws.send({
							c: 'User',
							a: 'sessionOperation',
							data: {
								id: that.id,
								action: 'session-top',
								source: 'uni-app'
							}
						})
					}, that)
				} else if (name == 'top_contacts') {
					that.ws.pageFun(function() {
						var new_group = 'common'
						if (that.info.sessionUser.group == 'common') {
							new_group = 'all_friends'
						}
						that.ws.send({
							c: 'User',
							a: 'updateFriendInfo',
							data: {
								id: that.info.sessionUser.id,
								new_group: new_group,
								method: 'update_group',
								source: 'uni-app'
							}
						});
						that.info.top_contacts = (new_group == 'common') ? true : false;
					}, that)
				} else if (name == 'shield') {
					that.ws.pageFun(function() {
						that.ws.send({
							c: 'User',
							a: 'shieldSession',
							data: {
								session_id: that.id,
								method: that.info.shield ? 'shield' : 'relieve'
							}
						})
					}, that)
				} else if (name == 'block_messages') {
					that.ws.pageFun(function() {
						that.ws.send({
							c: 'User',
							a: 'sessionOperation',
							data: {
								id: that.id,
								action: 'session-block-groupmessage',
								source: 'uni-app'
							}
						})
					}, that)
				}
			},
			saveRemark: function(val) {
				var that = this
				if (val != that.info.oldnickname) {
					that.ws.send({
						c: 'Message',
						a: 'groupChatMember',
						data: {
							id: that.info.sessionUser.id,
							new_nickname: val,
							method: 'save-groupmember-nickname'
						}
					});
				}
			},
			invitation: function() {
				uni.navigateTo({
					url: '/sub/pick-user/pick-user?action=invitation-groupmember'
				})
			},
			goToUserInfo: function() {
				// console.log(this.info,'this.info');
				if (this.info.sessionUser.job == 2 || this.info.sessionUser.job == '2') {
					let url = '/sub/center/mine/preview?id=' + this.userId
					uni.navigateTo({
						url: url
					})
				}

			},
			delSession: function() {
				this.delModelContent = '你确定要移除此会话吗？';
				this.delModelShow = true
			},
			goTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $--bg-color;
	}

	.user-avatar {
		height: 100rpx;
		width: 100rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.form-item {
		background: $--white;
		padding: 0 15px;
	}

	.fff-bg-item {
		color: #FFAE35;
		background: $--white;
	}

	.form-button {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}

	.greate-group-chat {
		display: flex;
		align-items: center;
		justify-content: center;
		background: $--grey;
		height: 100rpx;
		width: 100rpx;
		margin-right: 20rpx;
		border-radius: 16rpx;
	}

	.color-blue {
		color: $--blue;
	}

	.color-red {
		color: $--red;
	}

	.color-yellow {
		color: $u-type-warning;
	}

	.group-chat-users {
		padding-left: 20rpx;
		padding-bottom: 10rpx;
		display: flex;
		flex-wrap: wrap;
		width: 100vw;
	}

	.chat-user-item {
		width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.chat-user-item .chat-user-avatar {
		height: 100rpx;
		width: 100rpx;
		border-radius: 16rpx;
	}

	.chat-user-avatar-plus {
		height: 100rpx;
		width: 100rpx;
		border-radius: 16rpx;
		background: #F4F5F6;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chat-user-nickname {
		font-size: 26rpx;
		padding-top: 10rpx;
		width: 100rpx;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}
</style>